<!-- 数据详情 -->

<template>
  <div class="statistics">
    <!-- 桥梁总数 -->
    <div class="diy-header">
      <span class="title">桥梁统计</span>
      <span class="fTitle">Bridge statistics</span>
    </div>
    <div class="number">
      <div>{{ total }}</div>
      <div>
        <img src="@/assets/images/homeMap/tu.png" alt="" />
      </div>
    </div>

    <div class="diy-header">
      <span class="title">桥梁类型</span>
      <span class="fTitle">Bridge type</span>
    </div>
    <p class="tType">公路桥梁规范</p>
    <div id="CarPie"></div>
    <p class="tType">城市桥梁规范</p>
    <div id="CarPie1"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      dataList: [],
      total: "",
      options: [
        {
          value: 1,
          label: "公路桥梁规范"
        },
        {
          value: 0,
          label: "城市桥梁规范"
        }
      ],
      standardId: 1
    };
  },
  components: {},
  mounted() {
    this.getBridgeAll(1);
    this.getBridgeAll(0);
    this.getHomeBridgeNumber();
  },
  methods: {
    // 获取桥梁类型number
    getBridgeAll(type) {
      this.$api.mearsuringPointSetting
        .getHomeBridgeAll({
          standardId: type
        })
        .then(res => {
          console.log("桥梁类型数据", res);
          this.dataList = res.data.data;
          if (type == 1) {
            this.drawPie();
          } else {
            this.drawPie1();
          }
          window.addEventListener("resize", () => {
            this.CarPie.resize();
          });
        });
    },

    /**
     * 获取桥梁总数
     */
    getHomeBridgeNumber() {
      this.$api.mearsuringPointSetting.getHomeBridgeNumber().then(res => {
        console.log("桥梁总数", res);
        this.total = res.data.data;
      });
    },

    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById("CarPie"));
      // 绘制图表
      this.CarPie.setOption({
        backgroundColor: "rgba(2, 120, 200, 0)",
        legend: {
          orient: "horizontal",
          type:'scroll',
          bottom: 0,
          textStyle: {
            color: "##666666",
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: data => {
            let value = "";
            this.dataList.map((item, key) => {
              if (item.name == data) {
                value = item.value;
              }
            });
            return data + "  " + value;
          }
        },
        tooltip: {
          trigger: "item",
          position:['20%', '50%'],
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            // name: "养护类型统计",
            name: "公路桥梁规范", // YU 修改
            type: "pie",
            radius: ["30%", "60%"],
            center: ["50%", "42%"],
            roseType: "radius",
            // hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#327BDC",
                    "#8A81F9",
                    "#32D6CD",
                    "#32D17E",
                    "#FBE033",
                    "#FCAA5D"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: this.dataList
          }
        ]
      });
    },

    drawPie1() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie1 = new echarts.init(document.getElementById("CarPie1"));
      // 绘制图表
      this.CarPie1.setOption({
        backgroundColor: "rgba(2, 120, 200, 0)",
        legend: {
          orient: "horizontal",
          type:'scroll',
          bottom: 0,
          textStyle: {
            color: "##666666",
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: data => {
            let value = "";
            this.dataList.map((item, key) => {
              if (item.name == data) {
                value = item.value;
              }
            });
            return data + "  " + value;
          }
        },
        tooltip: {
          trigger: "item",
          position:['10%', '50%'],
          textStyle: {
            fontSize: 10,
          },
          formatter: "{a} <br/>{b}: <br/>{c} ({d}%)"
        },

        series: [
          {
            // name: "养护类型统计",
            name: "城市桥梁规范",  // YU 修改
            type: "pie",
            radius: ["30%", "80%"],
            center: ["50%", "42%"],
            roseType: "radius",
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#327BDC",
                    "#8A81F9",
                    "#32D6CD",
                    "#32D17E",
                    "#FBE033",
                    "#FCAA5D"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: this.dataList
          }
        ]
      });
    }
  },
  watch: {
    standardId: function(newVal) {
      this.standardId = newVal;
      this.getBridgeAll();
    }
  }
};
</script>

<style lang="scss" scoped>
.tType {
  font-size: 12px;
  font-weight: bold;
  color: #b8dbf2;
  margin-top: 15px;
  margin-left: 20px;
}
#CarPie {
  width: 275px;
  height: 200px;
}
#CarPie1 {
  width: 275px;
  height: 200px;
  margin-bottom: 20px;
}
.total {
  display: flex;
  justify-content: start;
  margin-top: 20px;
  p {
    color: #666666;
  }
  img {
    position: relative;
    top: -5px;
  }
  .num {
    color: #327bdc;
  }
}
.chart-type {
  margin-top: 20px;
  color: #6c6f82;
  font-size: 16px;
  img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
  .select {
    float: right;
    display: inline;
    width: 140px;
  }
}
.statistics {
  width: 100%;
  div {
    width: 100%;
  }
}
.number {
  display: flex;
  div:first-child {
    padding-top: 50px;
  }
  div {
    flex: 1;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    line-height: 23px;
    img {
      width: 85px;
      height: 86px;
      margin-top: 20px;
      margin-left: 20px;
    }
  }
}

.diy-header {
  background: url("../../../../assets//images/homeMap/线.png") no-repeat center;
  background-size: 95% 100%;
  width: 100%;
  height: 16px;
  margin-top: 25px;
  background-position-x: 50%;
  .title {
    font-size: 13px;
    font-weight: bold;
    color: #c6e5f6;
    position: relative;
    left: 15px;
    top: -5px;
  }
  .fTitle {
    font-weight: 400;
    color: #c6e5f6;
    display: inline-block;
    transform: scale(0.7);
    position: relative;
    left: 90px;
  }
}
</style>
